<template>
  <div class="login">
    <Header class="my-header">
      <p>
        <b>大粮宝</b>
      </p>
    </Header>
    <Content>
      <div class="my-login">
        <Row>
          <i-col span="12"
                 class="logo">
            <img :src="imgOne"
                 alt>
          </i-col>
          <i-col span="12"
                 class="login-right">
            <div class="ipt">
              <div class="user">
                <img :src="imgTwo"
                     alt>
                <span>|</span>
                <input type="text"
                       placeholder="请输入您的用户名"
                       v-model="userName">
              </div>
              <div class="pwd">
                <img :src="imgThree"
                     alt>
                <span>|</span>
                <input type="password"
                       placeholder="请输入您的密码"
                       v-model="passWord">
              </div>
              <div class="login-botton">
                <Row>
                  <i-col span="6">
                    <router-link to="/verificationCodelogin"
                                 class="my-fontcolor">验证码登录</router-link>
                  </i-col>
                  <i-col span="5"
                         offset="13">
                    <router-link to="/forget"
                                 class="my-fontcolor">忘记密码</router-link>
                  </i-col>
                </Row>
              </div>
              <!-- <input type="button" value="登录" @click = "login"> -->
              <button @click="login">请登录</button>
            </div>
          </i-col>
        </Row>
      </div>
    </Content>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      userName: 'admin',
      passWord: '123456',
      userClient: 1,
      // usertoken:'',
      imgOne: require('@/assets/logo.png'),
      imgTwo: require('@/assets/login/ico_yhm.png'),
      imgThree: require('@/assets/login/ico_mm.png')
    }
  },
  methods: {
    login () {
      var data = this.qs.stringify({
        userName: this.userName,
        passWord: this.passWord,
        userClient: this.userClient
      })
      // 发送ajax请求，判断登录
      this.axios({
        method: 'get',
        url: 'http://localhost:4946/user/login',
        data: data
      })
        .then(result => {
          // 讲获得的值放在localStroage中
          // 判断是否登录成功
          if (result.data.statusCode == 0) {
            localStorage.setItem('usertoken', result.data.message)
            // 为路由守卫设置值，供路由守卫判断
            localStorage.setItem('dlb', true)
            this.$router.push({
              name: '_home'
            })
            console.log(111)
          } else {
            localStorage.setItem('dlb', false)
            this.$router.push({
              path: '/login'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
      this.$router.push({
        name: '_home'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  width: 1920px;
  height: 1080px;
  position: relative;
  background: url(../../assets/background.png);
  .my-header {
    background: 0;
    height: 59px;
    width: 100%;
    border-bottom: 1px solid #747696;
    border-top: 1px solid #272a5c;
    p {
      color: #fff;
      font-size: 20px;
      margin-left: 330px;
      width: 100px;
      height: 59px;
      line-height: 59px;
      box-sizing: border-box;
    }
  }
  .my-login {
    width: 1040px;
    height: 456px;
    border-radius: 7px;
    box-shadow: 0px 0px 8px 5px #0b1349;
    position: absolute;
    top: 26%;
    left: 22%;
    .login-right {
      .register {
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background: #dfe8fa;
        font-size: 16px;
      }
      background: #fff;
      height: 456px;
      .ipt {
        margin-left: 92px;
        margin-top: 80px;
        margin-bottom: 46px;
        height: 270px;
        width: 336px;
        /*border:1px solid #eee;*/
        box-sizing: border-box;
        .user,
        .pwd {
          height: 65px;
          line-height: 65px;
          border-bottom: 1px solid #999999;
          margin-bottom: 12px;
          position: relative;
          span {
            margin-right: 10px;
            color: #ededed;
          }
          img {
            margin-left: 10px;
            margin-right: 10px;
          }
          input {
            border: 0;
            height: 64px;
            width: 275px;
            outline: none;
          }
        }
        .login-botton {
          margin-top: 26px;
          margin-bottom: 40px;
          color: #0084ff;
        }
        button {
          height: 50px;
          width: 336px;
          background: #0084ff;
          border: 0;
          color: #fff;
          font-size: 16px;
        }
      }
    }
  }
}
.my-fontcolor {
  color: #0084ff;
}
</style>
